<template>
  <div id="tools">
    <div class="ck-content">
    <check-box  class="ck-bt" :isActive="isAllset" @click.native="Allset"></check-box>
    </div>

    <div class="total">
      合计：￥{{totalPrice}}
    </div>

    <div class="buy">
      去计算({{totalcount}})
    </div>
  </div>
</template>

<script>
  import CheckBox from 'components/content/checkbox/CheckBox.vue'
  export default {
    name: "cart-tool",
    components:{
      CheckBox
    },
    computed:{
      totalPrice(){
        return this.$store.state.cartlist.filter(n =>{
          return n.checked == true
        }).reduce((prevalue,n) => {
          return prevalue + (n.price * n.count)
        },0).toFixed(2)
      },
      totalcount(){
        return this.$store.state.cartlist.filter(n => {
          return n.checked
        }).length
      },
      isAllset(){
      if(this.$store.state.cartlist.length ===0)
        return false
        return !(this.$store.state.cartlist.filter(n => !n.checked).length)
      }
    },
    methods:{
      Allset(){
        if(this.isAllset){
          this.$store.state.cartlist.forEach(item => item.checked = false)
        }else{
          this.$store.state.cartlist.forEach(item => item.checked = true)
        }
      }
    }
  }
</script>

<style scoped>

  #tools{
    display: flex;
    height: 40px;
    background: #fff4c2;
    position: relative;
  }

  .ck-content{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
  }

  .total{
    line-height: 40px;
    flex: 1;
  }

  .buy{
    width: 111px;
    line-height: 40px;
    background: orangered;
    color: #FFFFFF;
    text-align: center;
  }
</style>
